<template>
  <div id="XJMlistWrap">
    <!-- ---------------顶部横幅------------ -->
    <div class="topBanner">
      <router-link to="/home">
        <img
          src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
          alt=""
        />
      </router-link>
      <router-link to="/search">
        <van-search placeholder="搜索" shape="round" />
      </router-link>
      <div class="openApp">打开APP</div>
    </div>
    <van-tabs color="red" @click-tab="onClickTab($event)">
      <van-tab v-for="item in listDataS" :title="item.name" :key="item.id">
        <!-- 内容 {{ index }} -->
        <div class="row">
          <div class="row-side">
            <el-affix>
              <van-sidebar
                v-for="(side, index) in item.tabWraps"
                :key="index"
                @click="aaa(side, index)"
              >
                <!--@click="aaa(side.rankingId)"-->
                <van-sidebar-item
                  :title="side.name"
                  ref="itemRefs"
                  :class="{ sidebarItem: true, active: index === showClass }"
                />
              </van-sidebar>
            </el-affix>
          </div>

          <div class="infoCard">
            <!-- 信息卡片 -->
            <van-card
              @click="toDetail(card.id)"
              :desc="card.salePoint"
              :title="card.albumTitle"
              :thumb="`https://imagev2.xmcdn.com/${card.cover}`"
              style="
                width: 300px;
                height: 105px;
                margin: 0px;
                background-color: white;
              "
              v-for="(card, index) in listDataSide.albums?.slice(0, 9)"
              :key="card.id"
            >
              <template #tags>
                <van-icon name="tv-o" size="10">{{
                  useFormatPlayCount(card.playCount)
                }}</van-icon>
                <van-icon name="volume-o" size="10" style="margin-left: 10px">{{
                  card.trackCount
                }}</van-icon>
              </template>
            </van-card>
            <van-divider />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'index',
});
</script>

<script setup lang="ts">
import {
  Tab,
  Tabs,
  Sidebar,
  SidebarItem,
  Card,
  showToast,
  Divider,
} from 'vant';
import { ref, onMounted } from 'vue';
import { listData, listClassify } from '../../api/list';
import { useRouter } from 'vue-router';
import { useFormatPlayCount } from '@/mixin/playCount.ts';
const unm = ref<number>(); //默认下标 用来控制高亮的
const listDataS = ref<any>([]); //排行榜顶部数据
const listDataSide = ref<any>([]); //侧边数据
const router = useRouter();
// const active = ref(0); //侧边选中下标
const itemRefs = ref<any>([]); //侧边选中元素
// 一进来就发送请求
onMounted(() => {
  getListData();
  getListClassify(100006);
});
const getListData = async () => {
  const result = await listData(1);
  listDataS.value = result.data.tabLists;

  console.log(result, '123');
};
// 一级标签
const onClickTab = (event: any) => {
  console.log(listDataS.value[event.name].tabWraps);

  const newId = listDataS.value[event.name].tabWraps[0].rankingId;
  getListClassify(newId);

  // const newId = listDataS.value[event.name].id
  // getListClassify(newId)
  // 发送请求
};
// const getListClassify = async(rankingId:number)=>{
//  const result = await listClassify(rankingId)
//  console.log('二级数据',result);

// }

const showClass = ref(0);
// 切换侧边栏
const aaa = (id: any, index: number) => {
  // console.log(itemRefs.value[--id.position]);
  unm.value = id.position;
  const rankingId = id.rankingId;
  getListClassify(rankingId); //获取二级数据
  showClass.value = index;
  // itemRefs.value[--id.position].style = {color:'#FFF'}
};
const getListClassify = async (rankingId: number) => {
  const result = await listClassify(rankingId);
  listDataSide.value = result.data.rankList[0];
  // console.log('播放量', listDataSide.value);
};
// 跳转到详情页
function toDetail(id: number) {
  router.push('/detail/' + id);
}
</script>

<style scoped lang="less">
.topBanner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;
  padding-top: 15px;

  height: 50px;
  width: 100%;
  img {
    width: 70px;
    height: 19px;
  }
  .openApp {
    height: 29px;
    width: 88px;
    line-height: 29px;
    text-align: center;
    font-size: 12px;
    // background-color: #fa2800;
    border: 1px solid #fa2800;
    color: #fa2800;
    border-radius: 15px;
  }
}

.row {
  widows: 100%;
  display: flex;
}
.row-side {
  margin-top: 5px;
}
.infoCard {
  widows: 100%;
}
.van-sidebar-item {
  background-color: #eee;
  font-family: 300;
}
.van-sidebar-item--select {
  background-color: #eee;
  font-family: 300;
  color: #999;
  font-weight: 400;
  --van-sidebar-selected-border-color: #eee;
}

.sidebarItem {
  font-size: 16px;
}
.sidebarItem.active {
  background-color: #fff;
}

.sidebarItem.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background: #fa2800;
}
</style>
